<template>
  <div class="my-setting">
    <!-- index 原来的个人资料 直接抽出 在myPersonality -->
    <div class="deposit-content">
        <div class="top-bg">
            <van-nav-bar class="header" fixed :border="false" @click-left="diffBack">
                <div class="left"
                    slot="left">
                    <van-icon name="arrow-left"
                            size="24px"
                            color="#fff" />
                </div>
                <div class="title"
                    slot="title">{{title}}</div>
            </van-nav-bar>
        </div>
        <div  class="reset-wrapper">
            <van-cell-group class="portraitGroup" label-align="left">
                <van-cell title="版本信息"
                        class="cell"
                        center
                        @click="showTips">{{version}}</van-cell>
            </van-cell-group>
            <van-cell-group class="portraitGroup" label-align="left">
                <van-cell title="清除缓存"
                        class="cell"
                        center
                        is-link
                        @click="clearCache">{{cacheCal}}</van-cell>
            </van-cell-group>
            <van-cell-group label-align="left"
                class="portraitGroup">
                <van-cell title="新手指南"
                        is-link
                        center
                        class="cell"
                        @click="goGuide">
                        </van-cell>
            </van-cell-group>
        </div>
    </div>
  </div>
</template>
<script>
import Vue from 'vue'
import { Dialog } from 'vant';
Vue.use(Dialog);
import {
  getVersionNo
} from "@/utils/auth.js";
export default {
  components: {},
  data() {
    return {
      title: "设置",
      cacheCal: "",
      ishoW: '0' // 判断 缓存数大小于0
    };
  },
  created() {
    let version = getVersionNo()
    if (!version) {
      this.$toast('参数异常')
        window.setTimeout(() => {
          this.$router.push('/designer/personalCenter')
        }, 500)
      return
    }
    this.version = version
    this.cacheData()
  },
  methods: {
    diffBack () {
        this.$router.push('/designer/personalCenter')
    },
    showTips() {
      this.$toast('已经是最新版本哦~')
    },
    goGuide() {
        this.$router.push('/designer/newerGuide')
    },
    cacheData() {
        const _self  = this
        window.plus.cache.calculate( function ( size ) {
            if (size == 0) {
                _self.ishoW = '1'
            }
                _self.getfilesize(size)
           
             
        });
    },
    // 转换单位
    getfilesize(size) {
        const _this = this
        var num = 1024.00; //byte
        if (size < num) {
            // return size + "B";
            _this.cacheCal = size + " B"
        } else if (size < Math.pow(num, 2)) {
            _this.cacheCal = (size / num).toFixed(2) + " K";
        } else if (size < Math.pow(num, 3)) {
            _this.cacheCal = (size / Math.pow(num, 2)).toFixed(2) + " M";
        } else if (size < Math.pow(num, 4)) {
            _this.cacheCal = (size / Math.pow(num, 3)).toFixed(2) + " G";
        }
    },
    clearCache() {
        const _own = this
        if (_own.ishoW == '1') {
            _own.$toast('没有可以清除的缓存哦~')
        } else if (_own.ishoW == '0'){
            Dialog.confirm({
                title: '清除缓存提示',
                message: '你确定需要清除缓存并退出吗？'
            }).then(() => {
                window.plus.cache.clear( function () {
                    _own.$toast('清除成功')
                    _own.$router.push('/login')
                });
            }).catch(() => {
                _own.$toast('取消成功')
            });
        }
    }
  }
};
</script>
<style lang="scss" scoped>
.my-setting {
  .top-bg{
        width: 100%;
        background: #fff;
        border-bottom-left-radius: 0.5rem;
        border-bottom-right-radius: 0.5rem;
        .header {
            background: #5E8EFE;
            color: #ffffff;
            height: 0.92rem;
            .title {
                color: #ffffff;
                font-size: 0.35rem;
                }
        }
  }
  .reset-wrapper{
      position: fixed;
      width: 100%;
      padding: 0.24rem;
      box-sizing: border-box;
      top: 0.92rem;
      left: 0;
      right: 0;
      overflow-y: scroll;
      bottom: 1.6rem;
  }
  .portraitGroup {
    border-radius: 0.1rem;
    margin-bottom: 0.24rem;
    .weui-cells .vux-no-group-title {
      margin-top: 0px;
    }
  }
  .portraitGroupB {
    border-radius: 0.1rem;
    margin-bottom: 0.5rem;
    .weui-cells .vux-no-group-title {
      margin-top: 0px;
    }
  }
  .cell {
    min-height: 1rem;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    color: #3f3e3e;
    font-size: 0.3rem;
  }
  .cellImg{
    height: 1.68rem;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    color: #3f3e3e;
    font-size: 0.3rem;
    img {
      border-radius: 50%;
      width: 1.28rem;
      height:1.28rem;
      margin-top: 0.13rem;
    } 
  }
  .exitBtn {
    height: 0.9rem;
    width: 100%;
    font-family: PingFangSC-Semibold;
    font-weight: 600;
    color: #fff;
    font-size: 0.26rem;
    text-align: center;
    line-height: 0.9rem;
    margin: 0 auto;
    background: #5E8EFE;
    border-radius: 0.1rem;
  }
}
</style>
